<template>
    <div>
        <div class="rela">
            <textarea ref="text" @blur="hide" @focus="show" @input="words" class="trends" placeholder="分享这一刻想法..."></textarea>
            <div v-show="boxShow" class="bottom-box">
                <span>公开</span>
                <span>发布</span>
            </div>
        </div>
        <MyTabbar v-show="tabbarShow"></MyTabbar>
        <div v-show="boxShow" class="bottom-root">
            <div class="bottom-bar">
                <div class="bar-left">
                    <img src="/img/symbol.png" alt="">
                    <img src="/img/书本.png" alt="">
                    <img src="/img/图片.png" alt="">
                </div>
                <div class="bar-right">
                    {{fontWords}}/140
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyTabbar from "../components/Tabbar.vue"
export default{
    data(){
        return{
            boxShow:false,
            tabbarShow:true,
            fontWords:0
        }
    },
    methods:{
        words(){
            if(this.$refs.text.value.length>140){
                this.$refs.text.value = this.$refs.text.value.substr(0,140);
            }
            this.fontWords = this.$refs.text.value.length;
        },
        show(){
            this.boxShow = true;
            this.tabbarShow = false;
        },
        hide(){
            this.boxShow = false;
            this.tabbarShow = true;
        }
    },
    components:{
         MyTabbar
    }
}
</script>

<style scoped>
    .trends{
        width: 100%;
        resize:none;
        height: 90%;
        border: none;
        padding: 0 3.9vw;
        font-size: 3.2vw;
    }
    .trends:focus{
        border: none;
    }
    .rela{
        position: relative;
        height: 89%;
    }
    .bottom-box{
        width: 92.3vw;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 4vw;
        left: 3.9vw;
    }
    .bottom-box span{
        font-size: 3.2vw;
        display: inline-block;
        padding: 1.7vw 3.7vw;
        background-color: #e3e3e3;
        color: #999999;
        border-radius: 1.1vw;
    }
    .bottom-bar{
        width: 92.3vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }
    .bottom-bar img{
        width: 5.9vw;
    }
    .bottom-root{
        height: 14.7vw;
        background-color: #f2f1f1;
        border-top: 1px solid #cccccc;
    }
    .bar-left{
        width: 24.5vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 14.7vw;
    }
    .bar-right{
        color: #b5b5b5;
        line-height: 14.7vw;
    }
</style>